<template>
	<view class="equipment-wrap">
		<nav-bar class="header" title="设备详情" @goBack="goBack">
			<img slot="screen" src="../../../../static/img/ydtz-picture.png" alt="" @click="preview"
				v-if="distinguishId == 1">
		</nav-bar>
		<view v-if="distinguishId == 1">
			<!-- 展示详情 -->
			<view class="optical-cable-detail">
				<van-form>
					<!-- 	<van-field v-model="params.name" type='textarea' autosize rows="1" disabled label="设备名称"
					:input-align="siteName1.length > 18?'left':'right'" /> -->
					<van-field v-model="params.name||'--'" disabled :colon="true" type='textarea' rows="1" autosize
						label="设备名称" input-align="right" />
					<van-field v-model="params.techTypeName||'--'" :colon="true" type='textarea' rows="1" autosize
						disabled label="设备类型" input-align="right" />
					<van-field v-model="params.producerName||'--'" :colon="true" type='textarea' rows="1" autosize
						disabled label="设备品牌" input-align="right" />
					<van-field v-model="params.modelNumberName||'--'" :colon="true" type='textarea' rows="1" autosize
						disabled label="设备型号" input-align="right" />
					<van-field v-model="params.serilaNumName||'--'" :colon="true" type='textarea' rows="1" autosize
						disabled label="设备顺序" input-align="right" />
					<van-field v-model="params.sysName||'--'" :colon="true" type='textarea' rows="1" autosize disabled
						label="所属系统" input-align="right" />
					<van-field v-model="params.equLevelName||'--'" :colon="true" type='textarea' rows="1" autosize
						disabled label="设备归属" input-align="right" />
					<van-field v-model="params.begTim||'--'" :colon="true" type='textarea' rows="1" autosize disabled
						label="投运日期" input-align="right" />
					<van-field v-model="params.serviceStateName||'--'" :colon="true" type='textarea' rows="1" autosize
						disabled label="运行状态" input-align="right" />
					<van-field v-model="params.voltageClassName||'--'" :colon="true" type='textarea' rows="1" autosize
						disabled label="电压等级" input-align="right" />
					<van-field v-model="params.siteName||'--'" :colon="true" type='textarea' rows="1" autosize disabled
						label="所属站点" input-align="right" />
					<van-field v-model="params.stationTypeName||'--'" :colon="true" type='textarea' rows="1" autosize
						disabled label="站点类型" input-align="right" />
					<van-field v-model="params.parRoom||'--'" :colon="true" type='textarea' rows="1" autosize disabled
						label="所属机房" input-align="right" />
					<van-field v-model="params.parRack||'--'" :colon="true" type='textarea' rows="1" autosize disabled
						label="所属机柜" input-align="right" />
					<van-field v-model="params.parRackScreen||'--'" :colon="true" type='textarea' rows="1" autosize
						disabled label="所属机柜屏眉" input-align="right" label-width='118' />
				</van-form>
			</view>

			<!-- 承载光路 -->
			<view class="card-list" v-if="list.length>0">
				<view class="card-title">
					<span>承载光路</span>
				</view>
				<van-list v-model="isLoading" :finished="finished" finished-text="没有更多了" @load="loadMore">
					<standingCell @acquireId='acquireId' :list='list' :isIcon='false'>
					</standingCell>
				</van-list>
			</view>
		</view>

		<!-- 通信电源 -->
		<view v-if="distinguishId == 2">
			<!-- 展示详情 -->
			<view class="optical-cable-detail">
				<van-form>
					<van-field v-model="params1.name||'--'" disabled type='textarea' autosize rows="1" label="设备名称"
						input-align="right" :colon="true" />
					<van-field v-model="params1.techTypeName||'--'" :colon="true" type='textarea' rows="1" autosize
						disabled label="设备类型" input-align="right" />
					<van-field v-model="params1.producerName||'--'" :colon="true" type='textarea' rows="1" autosize
						disabled label="设备品牌" input-align="right" />
					<van-field v-model="params1.modelNumberName||'--'" :colon="true" type='textarea' rows="1" autosize
						disabled label="设备型号" input-align="right" />
					<van-field v-model="params1.serilaNumName||'--'" :colon="true" type='textarea' rows="1" autosize
						disabled label="设备顺序" input-align="right" />
					<van-field v-model="params1.entityid||'--'" :colon="true" type='textarea' rows="1" autosize disabled
						label="实物ID" input-align="right" />
					<van-field v-model="params1.equLevelName||'--'" :colon="true" type='textarea' rows="1" autosize
						disabled label="设备归属" input-align="right" />
					<van-field v-model="params1.begTim||'--'" :colon="true" type='textarea' rows="1" autosize disabled
						label="投运日期" input-align="right" />
					<van-field v-model="params1.serviceStateName||'--'" :colon="true" type='textarea' rows="1" autosize
						disabled label="运行状态" input-align="right" />
					<van-field v-model="params1.voltageClassName||'--'" :colon="true" type='textarea' rows="1" autosize
						disabled label="电压等级" input-align="right" />
					<van-field v-model="params1.siteName||'--'" :colon="true" type='textarea' rows="1" autosize disabled
						label="所属站点" input-align="right" />
					<van-field v-model="params1.stationTypeName||'--'" :colon="true" type='textarea' rows="1" autosize
						disabled label="站点类型" input-align="right" />
					<van-field v-model="params1.parRoom||'--'" :colon="true" type='textarea' rows="1" autosize disabled
						label="所属机房" input-align="right" />
					<van-field v-model="params1.parRack||'--'" :colon="true" type='textarea' rows="1" autosize disabled
						label="所属机柜" input-align="right" />
					<van-field v-model="params1.parRackScreen||'--'" :colon="true" type='textarea' rows="1" autosize
						disabled label="所属机柜屏眉" input-align="right" label-width='90px' />
					<van-field v-model="params1.powerFullCapacity||'--'" :colon="true" type='textarea' rows="1" autosize
						disabled label="满配整流容量" input-align="right" label-width='90px' />
					<van-field v-model="params1.powerSingle||'--'" :colon="true" type='textarea' rows="1" autosize
						disabled label="单个整流模块容量" input-align="right" label-width='118px' />
					<van-field v-model="params1.powerPresentCapacity||'--'" :colon="true" type='textarea' rows="1"
						autosize disabled label="当前配置整流容量" label-width='118px' input-align="right" />
					<van-field v-model="params1.powerLoadCurrent||'--'" :colon="true" type='textarea' rows="1" autosize
						disabled label="当前负载电流" input-align="right" label-width='118px' />
					<van-field v-model="params1.accumProducerName||'--'" :colon="true" type='textarea' rows="1" autosize
						disabled label="配套蓄电池组制造厂商" label-width='148px' input-align="right" />
					<van-field v-model="params1.accumBegTim||'--'" :colon="true" type='textarea' rows="1" autosize
						disabled label="蓄电池组投运时间" input-align="right" label-width='118px' />
					<van-field v-model="params1.accumModelnumberName||'--'" :colon="true" type='textarea' rows="1"
						autosize disabled label="配套蓄电池组型号" label-width='118px' input-align="right" />
					<van-field v-model="params1.accumTypeName||'--'" :colon="true" type='textarea' rows="1" autosize
						disabled label="配套蓄电池类型" input-align="right" label-width='118px' />
					<van-field v-model="params1.accumNum||'--'" :colon="true" type='textarea' rows="1" autosize disabled
						label="配套蓄电池组数量" input-align="right" label-width='118px' />
					<van-field v-model="params1.accumCapacity||'--'" :colon="true" type='textarea' rows="1" autosize
						disabled label="每组蓄电池容量" input-align="right" label-width='118px' />
					<van-field v-model="params1.accumSumCapacity||'--'" :colon="true" type='textarea' rows="1" autosize
						disabled label="蓄电池实测总容量" input-align="right" label-width='118px' />
					<van-field v-model="params1.jlrname||'--'" :colon="true" type='textarea' rows="1" autosize disabled
						label="操作人" input-align="right" />
					<van-field v-model="params1.jltimeText||'--'" :colon="true" type='textarea' rows="1" autosize
						disabled label="操作时间" input-align="right" />
				</van-form>
			</view>
		</view>

		<!-- 通信路由器 -->
		<view v-if="distinguishId == 3">
			<!-- 展示详情 -->
			<view class="optical-cable-detail">
				<van-form>
					<!-- 	<van-field v-model="params.name" type='textarea' autosize rows="1" disabled label="设备名称"
					:input-align="siteName1.length > 18?'left':'right'" /> -->
					<van-field v-model="params2.name||'--'" disabled label="设备名称" input-align="right" :colon="true"
						type='textarea' rows="1" autosize />
					<van-field v-model="params2.begTim||'--'" :colon="true" type='textarea' rows="1" autosize disabled
						label="投运日期" input-align="right" />
					<van-field v-model="params2.producerName||'--'" :colon="true" type='textarea' rows="1" autosize
						disabled label="设备品牌" input-align="right" />
					<van-field v-model="params2.modelNumberName||'--'" :colon="true" type='textarea' rows="1" autosize
						disabled label="设备型号" input-align="right" />
					<van-field v-model="params2.serilaNumName||'--'" :colon="true" type='textarea' rows="1" autosize
						disabled label="设备顺序" input-align="right" />
					<van-field v-model="params2.sysName||'--'" :colon="true" type='textarea' rows="1" autosize disabled
						label="所属系统" input-align="right" />
					<van-field v-model="params2.equLevelName||'--'" :colon="true" type='textarea' rows="1" autosize
						disabled label="设备归属" input-align="right" />
					<van-field v-model="params2.powerSupplyMode||'--'" :colon="true" type='textarea' rows="1" autosize
						disabled label="电源供电方式" input-align="right" label-width="118px" />
					<van-field v-model="params2.siteName||'--'" :colon="true" type='textarea' rows="1" autosize disabled
						label="所属站点" input-align="right" />
					<van-field v-model="params2.stationTypeName||'--'" :colon="true" type='textarea' rows="1" autosize
						disabled label="站点类型" input-align="right" />
					<van-field v-model="params2.parRoom||'--'" :colon="true" type='textarea' rows="1" autosize disabled
						label="所属机房" input-align="right" />
					<van-field v-model="params2.parRack||'--'" :colon="true" type='textarea' rows="1" autosize disabled
						label="所属机柜" input-align="right" />
					<van-field v-model="params2.parRackScreen||'--'" :colon="true" type='textarea' rows="1" autosize
						disabled label="所属机柜屏眉" input-align="right" label-width="118px" />
					<van-field v-model="params2.equStatus||'--'" :colon="true" type='textarea' rows="1" autosize
						disabled label="设备角色" input-align="right" />
					<van-field v-model="params2.moduleNum||'--'" :colon="true" type='textarea' rows="1" autosize
						disabled label="电源模块数量" input-align="right" label-width="118px" />
					<van-field v-model="params2.ethernetNum||'--'" :colon="true" type='textarea' rows="1" autosize
						disabled label="以太网口数量" input-align="right" label-width="118px" />
					<van-field v-model="params2.portNum||'--'" :colon="true" type='textarea' rows="1" autosize disabled
						label="2M口数量" input-align="right" />
					<van-field v-model="params2.lightNum||'--'" :colon="true" type='textarea' rows="1" autosize disabled
						label="光口数量" input-align="right" />
					<van-field v-model="params2.comboNum||'--'" :colon="true" type='textarea' rows="1" autosize disabled
						label="光电复用口数量" input-align="right" label-width="118px" />
				</van-form>
			</view>

			<!-- 承载光路 -->
			<view class="card-list" v-if="list.length>0">
				<view class="card-title">
					<span>承载业务</span>
				</view>
				<van-list v-model="isLoading" :finished="finished" finished-text="没有更多了" @load="loadMore">
					<!-- <standingCell :list='list' :isIcon='false'>
					</standingCell> -->
					<view class="bussiness-wrap">
						<view class="bussiness-item" v-for="(item,index) in list" :key="index">
							<view class="title-line">
								<view class="title-line-left">
									<view class="cell-name">
										{{item.routerBuzName}}
									</view>
								</view>
							</view>
							<view class="patrol-line"></view>
							<view class="">
								<view class="cell-line">
									<view class="cell-line-item">
										<view class="cell-label">
											槽 :
										</view>
										<view class="cell-value">
											{{item.slot}}
										</view>
									</view>
									<view class="cell-line-item">
										<view class="cell-label">
											子槽 :
										</view>
										<view class="cell-value">
											{{item.subslot}}
										</view>
									</view>
									<view class="cell-line-item">
										<view class="cell-label">
											端口 :
										</view>
										<view class="cell-value">
											{{item.portName}}
										</view>
									</view>
								</view>
								<view class="cell-line2 cell-line">
									<view class="cell-line-item">
										<view class="cell-label">
											端口类型 :
										</view>
										<view class="cell-value">
											{{item.portType}}
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</van-list>
			</view>
		</view>
	</view>
</template>

<script>
	import navBar from "../../../../components/common/nav-bar.vue";
	import standingCell from "../../../../components/standingBookComponents/cell/cell.vue"
	import echartsPie from '../../common/echartsPie.vue'
	import {
		getdeviceOverallDetail,
		getListOfDevice,
		getPicture,
		getListOfDeviceBusiness
	} from "../../../../api/ydtzApi.js"
	export default {
		data() {
			return {
				params: {
					name: '',
					techTypeName: '',
					producerName: '',
					modelNumberName: '',
					serilaNumName: '',
					sysName: '',
					equLevelName: '',
					begTim: "",
					serviceStateName: '',
					voltageClassName: '',
					siteName: '',
					stationTypeName: '',
					parRoom: '',
					parRack: '',
					parRackScreen: ""
				},
				params1: {
					powerFullCapacity: '',
					accumSumCapacity: ''
				},
				params2: {},
				list: [],
				finished: false,
				isLoading: false,
				total: 0, // 总条数
				page: 1,
				limit: 10,
				distinguishId: null,
				deviceFlag: null,
				objId: null,
			}
		},
		components: {
			navBar,
			standingCell,
			echartsPie
		},
		onLoad(option) {
			this.distinguishId = option.distinguishId
			this.deviceFlag = option.deviceFlag
			this.objId = option.objId
			this.getSiteOverallDetail()
			if (option.distinguishId == 1 || option.distinguishId == 3) {
				this.getTaskListByAdminT()
			}
		},
		methods: {
			// 获取列表
			getTaskListByAdminT(option) {
				let params = {
					pageSize: this.limit,
					pageNum: this.page,
					objId: this.objId,
				}
				if (this.distinguishId == 1) {
					this.$apiRequest.ydtzApi.getListOfDevice(params)
						.then(({
							data: res
						}) => {
							this.list = this.list.concat(res.rows.map(item => {
								return {
									name: item.name,
									serviceStateName: item.serviceStateName,
									secondArr: [{
											label: "起始站点",
											value: item.astationName,
										},
										{
											label: "终止站点",
											value: item.zstationName
										},
										{
											label: "纤芯占用",
											value: item.useSn
										},
										{
											label: "速率",
											value: item.rate
										},

									],
									...item
								}
							}));
							this.isLoading = false;
							this.refreshing = false;
							this.total = res.total
						})
				} else if (this.distinguishId == 3) {
					this.$apiRequest.ydtzApi.getListOfDeviceBusiness(params)
						.then(({
							data: res
						}) => {
							this.list = this.list.concat(res.rows);
							this.isLoading = false;
							this.refreshing = false;
							this.total = res.total
						})
				}

			},
			loadMore() {
				if (this.total > this.list.length) {
					this.page = this.page + 1;
					this.getTaskListByAdminT();
				} else {
					this.finished = true;
				}
			},
			// 获取详情
			getSiteOverallDetail(option) {
				this.$apiRequest.ydtzApi.getdeviceOverallDetail({
					objId: this.objId,
					deviceFlag: Number(this.deviceFlag)
				}).then(({
					data: res
				}) => {
					if (this.deviceFlag == 1) {
						this.params = res
					} else if (this.deviceFlag == 2) {
						this.params1 = res
						if (res.accumSumCapacity) {
							this.params1.accumSumCapacity = res.accumSumCapacity + 'A'
						}
						if (res.accumCapacity) {
							this.params1.accumCapacity = res.accumCapacity + 'A'
						}
						if (res.powerSingle) {
							this.params1.powerSingle = res.powerSingle + 'A'
						}
						if (res.powerLoadCurrent) {
							this.params1.powerLoadCurrent = res.powerLoadCurrent + 'A'
						}
						if (res.powerPresentCapacity) {
							this.params1.powerPresentCapacity = res.powerPresentCapacity + 'A'
						}
						if (res.powerFullCapacity) {
							this.params1.powerFullCapacity = res.powerFullCapacity + 'A'
						}
					} else if (this.deviceFlag == 3) {
						this.params2 = res
					}
				})
			},
			goBack() {
				uni.navigateBack()
			},
			preview() {
				uni.navigateTo({
					url: `/pages/standingBook/transmissionEquipment/picturePreview/picturePreview?objId=${this.objId}`
				})
			},
			// 承载光路详情
			acquireId(id) {
				uni.navigateTo({
					url: `/pages/standingBook/opticalPathManagement/opticalPathDetail/opticalPathDetail?objId=${id.objId}`
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f2f6fa;
	}

	.header {
		position: sticky;
		top: 0;
		z-index: 999;

		img {
			width: px2vw(58);
			margin-right: px2vw(40);
		}
	}

	.equipment-wrap {
		padding-bottom: px2vh(30);
	}

	.optical-cable-detail {
		width: calc(100vw - #{px2vw(60)});
		background: #fff;
		border-radius: px2vw(20);
		margin: px2vh(30) auto;

		::v-deep .van-field__control:disabled {
			-webkit-text-fill-color: #333;
			font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		}
	}

	.cable-info-tab {
		width: calc(100% - #{px2vw(60)});
		height: px2vh(120);
		border-radius: px2vw(20);
		box-sizing: border-box;
		margin: px2vh(40) px2vw(30) px2vh(30);
		padding: 0 px2vw(10);
		background-color: #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;

		.info-tab-item {
			width: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			color: rgba(51, 51, 51, 1);
			font-size: px2vw(38);

			&.info-tab-current {
				height: px2vh(100);
				//margin-right: px2vw(10);
				border-radius: px2vw(20);
				background-color: rgba(65, 122, 220, 1);
				color: rgba(255, 255, 255, 1);
				font-weight: Bold;
			}
		}
	}

	.title-icon {
		width: px2vw(223);
		height: px2vh(50);
		background: rgba(65, 220, 131, 0.1);
		border-radius: px2vh(10);
		color: #41dc83;
		font-weight: bold;
		text-align: center;
		line-height: px2vh(62);
		font-size: px2vh(32);
		align-self: flex-start;
		margin-top: px2vh(50);
	}

	.cable-list {
		padding-bottom: px2vh(30);
	}

	.cable-item {
		width: calc(100% - #{px2vw(60)});
		padding: 0 px2vh(40);
		background: #fff;
		box-sizing: border-box;
		margin: 0 auto;
		border-radius: px2vh(16);
		margin-bottom: px2vh(30);

		.cable-text {
			font-size: px2vh(36);
			line-height: px2vh(62);
			padding: px2vh(38) px2vw(10);
			color: #A2A2A2;

			& span {
				color: #666;
				font-weight: 600;
			}
		}

		.cable-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			line-height: px2vh(140);
			border-bottom: px2vh(2) solid #E5E5E5;

			& .cable-title-left {
				display: flex;
				align-items: center;

				.cable-title-img {
					width: px2vw(62);
					height: px2vh(62);
					background: url('../../../../static/img/ydtz-rank.png') no-repeat;
					background-size: 100% 100%;
					text-align: center;
					line-height: px2vh(62);
					color: #fff;
					margin-right: px2vw(24);
					font-weight: bold;
				}

				.cable-title-name {
					font-size: px2vh(42);
					font-weight: bold;
				}
			}
		}
	}

	.bussiness-info {
		width: calc(100vw - #{px2vw(60)});
		height: px2vh(775);
		background: #fff;
		border-radius: px2vw(20);
		margin: 0 auto;
		box-sizing: border-box;

		.pieChart2 {
			width: 100%;
			height: px2vh(505);
			padding: px2vh(20) 0;

		}

		.optical-cable-tab {
			height: px2vh(118);
			display: flex;
			margin: 0 px2vw(20);
			box-sizing: border-box;
			font-size: px2vh(32);
			color: #666666;
			line-height: px2vh(62);
			align-items: center;
			justify-content: space-between;
			border-bottom: px2vh(1) solid #e5e5e5;

			.optical-cable-item {
				width: 25%;
				overflow: hidden;
				height: px2vh(108);
				line-height: px2vh(108);
				text-align: center;
			}

			.active {
				color: #417adc;
				font-weight: 700;
				border-bottom: px2vh(10) solid #417ADC;
			}
		}
	}

	.view-all {
		margin: 0 px2vw(20);
		font-size: px2vh(32);
		color: #aaa;
		text-align: center;
		line-height: px2vh(113);
		border-top: px2vh(2) dashed #eee;
	}

	.card-title {
		text-align: center;
		color: #1684FC;
		font-weight: 600;
		font-size: px2vh(42);
		line-height: px2vh(82);

		span {
			display: inline-block;
			border-bottom: px2vh(6) solid #1684FC;
		}
	}

	// 业务列表样式
	.bussiness-wrap {
		padding-bottom: px2vh(40);

		.bussiness-item {
			width: px2vw(1020);
			margin: 0 auto;
			background: #ffffff;
			border-radius: px2vh(20);
			margin-top: px2vh(30);
			padding: 0 px2vw(30);
			padding-bottom: px2vw(30);
			box-sizing: border-box;

			.cell-name {
				color: #333333;
				font-size: px2vw(46);
				margin-bottom: px2vh(30);
				margin-left: px2vw(20);
				padding-top: px2vw(30);
				box-sizing: border-box;
				flex: 1;
			}

			.patrol-line {
				width: 100%;
				border: px2vh(1) solid #e5e5e5;
			}
			.cell-line {
				padding: 0 px2vw(20);
				display: flex;
				justify-content: space-between;
				margin-top: 10px;

				.cell-line-item {
					display: flex;
					align-items: flex-start;
					font-size: px2vw(40);
					line-height: px2vh(62);
					color: #666666;
					word-break: break-all;
				}
			}
			.cell-line2{
				margin-top:0;
			}
		}
	}
</style>